<!DOCTYPE html>
<html>
<head>
	<title>Nagpur Munciple Corporation - Google Mapping</title>
	<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
	<!--<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=ABQIAAAAu5uZUEWFf_PGLJL6oAB1ahSCNtSGhNoL_TN2FnCc3wIkczsEQxQd9JQdimODbNk5fsLXuxktQQylSQ" type="text/javascript"></script>-->

	<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBl-1kmeYgZ8kS_L9_LqfeO481d_zKW6i4&sensor=false">
    </script>
	
	<script type="text/javascript">
	var map;
	var nmcOfficeMarkers = new Array();
	var nmcStartPointMarkers = new Array();
	//var polyLines = new Array();
	var sweepingTrack;
	var infowindow = new google.maps.InfoWindow({
											content: " "
										});
	
	
	var nmcOffices = [new Office("Dhantoli",21.14900241815646, 79.08094482216802,""),
						new Office("Neharu Nagar",21.155406246787734, 79.08128814492193,""),
						new Office("Lakshmi Nagar",21.148682219455765, 79.11184387001958,"")
					];
	
	
	function initialize() {
		var myOptions = {
			center: new google.maps.LatLng(21.14900241815646, 79.08094482216802),
			zoom: 12,
			mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		
	}
	
	function Office(name,lat,lng, info ) {
		this.name = name;
		this.lat = lat;
		this.lng = lng;
		this.info = info;
	}

	function cityView() {
		//alert("Calling");
		//map.clearOverlays();
		removeAllMarkers();
		map.setCenter(new google.maps.LatLng(21.14900241815646, 79.08094482216802));
	}
	
	function zoneView() {
		//alert("Calling");
		removeAllMarkers();
		if(nmcOfficeMarkers.length)
		map.setCenter(new google.maps.LatLng(21.14900241815646, 79.08094482216802));
		displayOffices();
	}
	
	function displayOffices() {
		for(var i = 0; i < nmcOffices.length; i++ ) {
			var marker = new google.maps.Marker(
			{
				position:new google.maps.LatLng(nmcOffices[i].lat, nmcOffices[i].lng),
				myContent:nmcOffices[i].name
			}
			);
			nmcOfficeMarkers.push(marker);
			marker.setMap(map);
			google.maps.event.addListener(marker, 'click', showInfoWindow);
		
		}
	
	}
	
	function showInfoWindow() {
		//alert(this.myContent);
		infowindow.setContent(this.myContent);
        infowindow.open(map, this);
		displayEmpTrack();
                      
	}
	
	function displayEmpTrack() {
		//Set polyline to null and remove from map
		if(sweepingTrack != null) {
			sweepingTrack.setMap(null);
			sweepingTrack = null;
		} else {
			//Get Track points for start location
			//Create Map
			//Create Line 
			//Display Line
			var sTrack = [
				new google.maps.LatLng(21.185500530278105, 79.07888488564458),
				new google.maps.LatLng(21.155406246787734, 79.08128814492193),
				new google.maps.LatLng(21.148682219455765, 79.11184387001958)
			];
			
			sweepingTrack = new google.maps.Polyline({
				path: sTrack,
				strokeColor: "#FF0000",
				strokeOpacity: 1.0,
				strokeWeight: 5
			});
			
			//map.setCenter(new google.maps.LatLng(21.148682219455765, 79.11184387001958);
			sweepingTrack.setMap(map);
		}
	}
	
	function removeAllMarkers() {
		for(var i=0; i < nmcOfficeMarkers.length; i++ ) {
			nmcOfficeMarkers[i].setMap(null);
		}
	}
	
	function clearCompleteMap() {
		for(var i=0; i < nmcOfficeMarkers.length; i++ ) {
			nmcOfficeMarkers[i].setMap(null);
		}
	}
	
	</script>

</head>

<body onload="initialize()" >

<div id="container">
	<div id="header">
		<h1>
			NMC Google Mapping
		</h1>
	</div>
	<div id="navigation">
		<ul>
			<li><a href="javascript:cityView()">City View</a></li>
			<li><a href="javascript:zoneView()">Zone Offices</a></li>
			<!--<li><a href="#">Services</a></li>
			<li><a href="#">Contact us</a></li>-->
		</ul>
	</div>
	<div id="content-container">
		<div id="content">
			<div id="map_canvas" style="width: 625px; height: 400px"></div>
		</div>
		<div id="aside">
			
			<h2>Search By Area</h2>
			<div>
			Select Zone :
			<select >
				<option>East </option>
				<option>West</option>
				<option>North</option>
			</select>
			</div>
			</br>
			<div>
			Select Ward :
			<select>
				<option>Buldi</option>
				<option>Dhantoli</option>
				<option>Ramdaspeth</option>
				<option>Lakshmi Nagar</option>
			</select>
			</div>
			<Input type="button" name="b1" onclick="javascript:displayWard()" value="GO"  />

			<h2>Search By Emp</h2>
			Employee Id : <Input type="text"/>
			<Input type="button" name="b2 "value="GO" onclick="javascript:displayEmpTrack()"/>

		</div>
		<div id="footer">
			&copy; Nagpur Muncipal Corporation, 2012  | Powered by <a href="#">InCights</a>
		</div>
	</div>
</div>


</body>
</html>
